<template>
  <div>
    <el-card>
      <el-descriptions class="margin-top" title="简介" :column="2" border>
        <template slot="extra">
          <el-button type="primary" @click="edit" size="small">操作</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-picture-outline"></i>
            头像
          </template>
          <img class="img" :src="byIdData.logo" alt="" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            账户名
          </template>
          {{byIdData.rname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-odometer"></i>
            年龄
          </template>
          {{byIdData.age}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-male"></i>
            <i class="el-icon-female"></i>
            性别
          </template>
          <el-tag size="small">{{byIdData.sex}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-message"></i>
            电话号码
          </template>
          {{byIdData.phone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            地区
          </template>
          {{byIdData.rplace}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            职业
          </template>
          {{byIdData.vocation}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-basketball"></i>
            星座
          </template>
          {{byIdData.constellation}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-magic-stick"></i>
            个人简介
          </template>
          {{byIdData.rdesc}}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

     <!-- 修改框  -->
     <el-dialog title="修改客户信息" :append-to-body="true" :visible.sync="editbox">
      <el-form >
        <el-form-item  label="客户头像" >
          <el-upload action="#" ref="mYupload" list-type="picture-card" :on-remove="updhandleRemove" :http-request="updcustomUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="原图片预览" >
          <el-image style="width: 110px; height: 110px" :src="previewImage" id="yourFileInputId"></el-image>
        </el-form-item>
        <el-form-item label="客户名" >
           <el-input  v-model="updForm.rname"></el-input>
        </el-form-item>
        <el-form-item label="求租地址" >
           <el-select v-model="updForm.rplace" placeholder="请选择地址">
              <el-option v-for="item in AreaList" :key="item.id" :label="item.areaName" :value="item.areaName">
              </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="电话号码" >
           <el-input v-model="updForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="描述" >
           <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="updForm.rdesc"></el-input>
        </el-form-item>
        <el-form-item label="职业" >
           <el-input v-model="updForm.vocation"></el-input>
        </el-form-item>
        <el-form-item label="星座" >
           <el-input v-model="updForm.constellation"></el-input>
        </el-form-item>
        <el-form-item label="年龄" >
           <el-select v-model="updForm.age" placeholder="请选择年龄">
              <el-option label="10后" value="10后"></el-option>
              <el-option label="00后" value="00后"></el-option>
              <el-option label="90后" value="90后"></el-option>
              <el-option label="80后" value="80后"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="年龄" >
          <el-radio v-model="updForm.sex"  label="男">男</el-radio>
          <el-radio v-model="updForm.sex"  label="女">女</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="editbox=false">取 消</el-button>
         <el-button @click="update" type="primary">确 定</el-button>
      </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
    data () {
        return{
          byIdData:{},
          updForm:{},
          editbox:false,
          editfile:null,
          previewImage:null,
          AreaList:[],
        }
    },
    created() {
      this.getByidList();
    },

     methods:{
      async update(){
      let formData=new FormData();
      formData.append('file',this.editfile);
      formData.append('client',JSON.stringify(this.updForm));
      console.log(this.editfile);
      console.log(this.updForm);
      let ret=await this.$http.put('qiantai/my/update',formData);
      if(ret.code != 200){
               return this.$message.error(ret.message);
            }
            this.$message.success(ret.message);
          this.$refs['mYupload'].clearFiles();
          this.editbox=false;
          this.getByidList();
    },
    async edit(){
      this.editbox=true;
      this.updForm=this.byIdData;
      this.previewImage=this.byIdData.logo;
      let ret=await this.$http.get('/admin/areaInfo/selectAll');
      console.log(ret);
      this.AreaList=ret.data;
    },
    updhandleRemove(file, fileList) {
      this.editfile=null;
    },
    //获取图片
    updcustomUpload(file){
      this.editfile=file.file;
    },
      async getByidList() {
      let id =this.id = this.$route.query.id;
      let ret=await this.$http.get(`/qiantai/my/byid/${id}`);
      console.log(ret);
      this.byIdData=ret.data;
      localStorage.setItem('crea', JSON.stringify(ret.data));  
    }
     }
}
</script>

<style lang="less" scoped>
.img {
  width: 80px;
  height: 80px;
}
</style>>
